<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/dist/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/plugins/datatables/css/matrix-style.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/dist/css/AdminLTE.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/plugins/datatables/css/dataTables.bootstrap.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        a, img {
            border: 0;
        }

        .stepInfo {
            position: relative;
            background: #f2f2f2;
            margin: 100px auto 0 auto;
            width: 600px;
        }

        .stepInfo li {
            float: left;
            width: 32%;
            height: 0.15em;
            background: #bbb;
        }

        .stepIco {
            border-radius: 1em;
            padding: 0.03em;
            background: #bbb;
            text-align: center;
            line-height: 2.5em;
            color: #fff;
            position: absolute;
            width: 2.5em;
            height: 2.5em;
        }

        .stepIco1 {
            top: -1.2em;
            left: -1%;
        }

        .stepIco2 {
            top: -1.2em;
            left: 31%;
        }

        .stepIco3 {
            top: -1.2em;
            left: 61%;
        }

        .stepIco4 {
            top: -1.2em;
            left: 91%;
        }

        .stepText {
            color: #666;
            margin-top: 0.2em;
            width: 10em;
            text-align: center;
            margin-left: -3.8em;
        }

        tbody {
            display: table-row-group;
            vertical-align: middle;
            border-color: inherit;
        }

        .table > tbody > tr > th, .table > tbody > tr > td {
            border: none;
        }

        .table {
            margin: 0 auto;
            width: 60%;
        }

        hr {
            margin-left: 20%;
            margin-right: 20%;
        }

        h3 {
            color: #337ab7;
            margin: 40px auto;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<!--订单状态-->
<div id="orderStatus" class="orderStatus">
    <input type="hidden" value=${orderDetailVo.status } id="o_status"/><!--后台传到页面的数据-->
    <div class="stepInfo">
        <ul>
            <li id="li1"></li>
            <li id="li2"></li>
            <li id="li3"></li>
        </ul>
        <div class="stepIco stepIco1" id="create">1
            <div class="stepText" id="createText">下单</div>
            <%--<div class="stepText">${orderDetailVo.orderCreateTime }</div>--%>
        </div>
        <div class="stepIco stepIco2" id="pay">2
            <div class="stepText" id="payText">付款</div>
            <div class="stepText"></div>
        </div>
        <div class="stepIco stepIco3" id="received">3
            <div class="stepText" id="receivedText">发货</div>
            <div class="stepText"></div>
        </div>
        <div class="stepIco stepIco4" id="completed">4
            <div class="stepText" id="completedText">完成</div>
            <div class="stepText"></div>
        </div>
    </div>
</div>
<div style="height: 160px;"></div>
<!--会员信息-->
<div id="member">
    <table class="table">
        <tbody>
        <tr>
            <th colspan="2" class="text-left">
                <h4>进货商ID:<span>${orderDetailVo.memberId}</span></h4>
            </th>
            <th colspan="2" class="text-left">
                <h4>进货商全称:<span>${orderDetailVo.memberName}</span></h4>
            </th>
        </tr>
        <tr>
            <td colspan="2" class="text-left">联系人:<span>${orderDetailVo.contacts}</span></td>
            <td colspan="2" class="text-left">联系电话:<span>${orderDetailVo.telPhone}</span></td>
            <td colspan="2" class="text-left">收货地址:<span>${orderDetailVo.address}</span></td>
        </tr>
        </tbody>
    </table>
</div>
<!--会员信息结束-->
<hr>
<!--供应商信息开始-->
<div id="applyer">
    <table class="table">
        <tbody>
        <tr>
            <th colspan="2" class="text-left">
                <h4>供应商ID:<span>${orderDetailVo.supplierId}</span></h4>
            </th>
            <th colspan="2" class="text-left">
                <h4>供应商全称:<span>${orderDetailVo.supplierName}</span></h4>
            </th>
        </tr>
        <tr>
            <td colspan="2" class="text-left">联系人:<span>${orderDetailVo.sendContacts}</span></td>
            <td colspan="2" class="text-left">联系电话:<span>${orderDetailVo.sendTelPhone}</span></td>
            <td colspan="2" class="text-left">发货地址:<span>${orderDetailVo.sendAddress}</span></td>
        </tr>
        </tbody>
    </table>
</div>
<!--供应商信息结束-->
<hr id="applyerHr">
<div id="order">
    <div style="width: 60%;margin: 0 auto;text-align: left;">
        <h3>商品信息</h3>
        <h4>
            订单号:<span>${orderDetailVo.orderNo}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="totalMoney">商品总金额：<span
                style="color: blue">${orderDetailVo.money}</span></span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="orderMoney">订单总金额：<span
                style="color: red">${orderDetailVo.totalCost}</span></span>
        </h4>
    </div>
    <table id="productTable" class="table">
        <thead>
        <th data-name="id">编号</th>
        <th data-name="">商品名称</th>
        <th data-name="">商品数量</th>
        <th data-name="">单价</th>
        <th data-name="">总额</th>
        </thead>
    </table>
</div>
<hr>
<div id="financial" style="width: 60%;margin: 0 auto;text-align: left;">
    <h3>财务信息</h3>
    <div>
        <p>商品总额:<span>${orderDetailVo.money}</span></p>
        <p>物流费用:<span>${orderDetailVo.freight}</span></p>
        <p>订单总额:<span>${orderDetailVo.totalCost}</span></p>
        <%--<p>银行流水号:<span>${orderDetailVo.contacts}</span></p>--%>
    </div>
</div>
<hr id="hr">
<div id="logistics" style="width: 60%;margin: 0 auto;text-align: left;">

    <h3>物流信息</h3>
    <div>
        <p>物流公司:<span>${orderDetailVo.logisticsCompany}</span></p>
        <p>物流编号:<span>${orderDetailVo.logisticsNo}</span></p>
        <%--<p>物流进度:<span>${orderDetailVo.contacts}</span></p>--%>
    </div>
</div>

<!-- jQuery 2.1.4 -->
<script src="${ctx}/static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
<!-- datatable -->
<script src="${ctx}/static/plugins/datatables/jquery.dataTables.js" type="text/javascript"></script>
<script src="${ctx}/static/plugins/datatables/dataTables.bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        setTimeout("changeDivStyle();", 100); // 0.1秒后展示结果，因为HTML加载顺序，先加载脚本+样式，再加载body内容。所以加个延时
        var tr = "";
        <c:forEach items="${orderDetailVo.orderProductsList}" var="node">
        tr += "<tr><td> <c:out value="${node.productCode}"></c:out></td><td><c:out value="${node.productName}"></c:out></td><td><c:out value="${node.num}"></c:out></td><td><c:out value="${node.purchasePrice}"></c:out></td><td><c:out value="${node.totalMoney}"></c:out></td></tr>"
        </c:forEach>
        $("#productTable").append(tr);


    });
    function changeDivStyle() {
        var o_status = $("#o_status").val();	//获取隐藏框值
//        var o_status =1;
        if (o_status == 0) {
            $('#create').css('background', '#DD0000');
            $('#createText').css('color', '#DD0000');
            $('#financial').addClass('hide');
            $('#logistics').addClass('hide');
            $('#hr').addClass('hide');
            $('#orderMoney').addClass('hide');
            $('#applyer').addClass('hide');
            $('#applyerHr').addClass('hide');
        } else if (o_status == 1) {
            $('#create').css('background', '#DD0000');
            $('#createText').css('color', '#DD0000');
            $('#financial').addClass('hide');
            $('#logistics').addClass('hide');
            $('#hr').addClass('hide');
            $('#applyer').addClass('hide');
            $('#applyerHr').addClass('hide');
        } else if (o_status == 2) {
            $('#create').css('background', '#DD0000');
            $('#createText').css('color', '#DD0000');
            $('#pay').css('background', '#DD0000');
            $('#payText').css('color', '#DD0000');
            $('#li1').css('background', '#DD0000');
            $('#logistics').addClass('hide');
            $('#applyer').addClass('hide');
            $('#applyerHr').addClass('hide');
        } else if (o_status == 3) {
            $('#create').css('background', '#DD0000');
            $('#createText').css('color', '#DD0000');
            $('#pay').css('background', '#DD0000');
            $('#payText').css('color', '#DD0000');
            $('#received').css('background', '#DD0000');
            $('#receivedText').css('color', '#DD0000');
            $('#li1').css('background', '#DD0000');
            $('#li2').css('background', '#DD0000');
        } else if (o_status == 4) {
            $('#create').css('background', '#DD0000');
            $('#createText').css('color', '#DD0000');
            $('#pay').css('background', '#DD0000');
            $('#payText').css('color', '#DD0000');
            $('#received').css('background', '#DD0000');
            $('#receivedText').css('color', '#DD0000');
            $('#completed').css('background', '#DD0000');
            $('#completedText').css('color', '#DD0000');
            $('#li1').css('background', '#DD0000');
            $('#li2').css('background', '#DD0000');
            $('#li3').css('background', '#DD0000');
        } else if (o_status == 5) {
            $('#orderStatus').addClass('hide');
            $('#financial').addClass('hide');
            $('#logistics').addClass('hide');
            $('#wuliu2').addClass('hide');
            $('#wuliu3').addClass('hide');
            $('#hr').addClass('hide');
            $('#orderMoney').addClass('hide');
            $('#applyer').addClass('hide');
            $('#applyerHr').addClass('hide');
        }
    }
</script>
</body>
</html>